<template>
  <view class="user-detail">
    <uni-card :title="user.username">
      <view class="role-badge">
        {{getRoleText(user.role)}}
      </view>
      
      <view class="detail-section">
        <view class="section-title">基本信息</view>
        <view class="info-row">
          <text class="label">邮箱：</text>
          <text class="value">{{user.email}}</text>
        </view>
        <view class="info-row">
          <text class="label">手机：</text>
          <text class="value">{{user.phone}}</text>
        </view>
        <view class="info-row">
          <text class="label">状态：</text>
          <text class="value" :class="{'warning': user.status === 0}">
            {{getStatusText(user.status)}}
          </text>
        </view>
        <view class="info-row">
          <text class="label">创建时间：</text>
          <text class="value">{{user.createdAt}}</text>
        </view>
        <view class="info-row">
          <text class="label">更新时间：</text>
          <text class="value">{{user.updatedAt}}</text>
        </view>
      </view>
      
      <template v-slot:actions>
        <view class="actions">
          <button class="action-btn" 
            @click="toggleStatus"
            :class="{'disabled': user.status === 0}"
          >
            {{user.status === 1 ? '禁用账号' : '启用账号'}}
          </button>
          <button class="action-btn" @click="goToEdit">
            编辑信息
          </button>
        </view>
      </template>
    </uni-card>
    
    <uni-card title="维护任务" margin-top="10" v-if="user.role === 'MAINTAINER'">
      <uni-list>
        <uni-list-item v-for="task in maintenanceTasks" 
          :key="task.id"
          :title="task.maintenanceType"
          :note="task.description"
          :rightText="task.status"
          clickable
          @click="goToTaskDetail(task.id)"
        />
      </uni-list>
      
      <view v-if="!maintenanceTasks.length" class="empty-tip">
        暂无维护任务
      </view>
    </uni-card>
  </view>
</template>

<script>
import { request } from '@/utils/request';

export default {
  data() {
    return {
      user: {},
      maintenanceTasks: []
    };
  },
  
  onLoad(options) {
    this.userId = options.id;
    this.loadData();
  },
  
  methods: {
    async loadData() {
      try {
        // 加载用户信息
        const user = await request({
          url: `/api/users/${this.userId}`
        });
        this.user = user;
        
        // 如果是维护人员，加载相关任务
        if (user.role === 'MAINTAINER') {
          const tasks = await request({
            url: '/tasks',
            data: {
              maintainerId: this.userId
            }
          });
          this.maintenanceTasks = tasks;
        }
      } catch (err) {
        uni.showToast({
          title: '加载数据失败',
          icon: 'none'
        });
      }
    },
    
    getRoleText(role) {
      const roleMap = {
        'ADMIN': '管理员',
        'MAINTAINER': '维护人员',
        'USER': '普通用户'
      };
      return roleMap[role] || role;
    },
    
    getStatusText(status) {
      return status === 1 ? '正常' : '已禁用';
    },
    
    async toggleStatus() {
      try {
        await request({
          url: `/api/users/${this.userId}/status`,
          method: 'PUT',
          data: {
            status: this.user.status === 1 ? 0 : 1
          }
        });
        
        uni.showToast({
          title: '状态更新成功',
          icon: 'success'
        });
        
        this.loadData();
      } catch (err) {
        uni.showToast({
          title: '状态更新失败',
          icon: 'none'
        });
      }
    },
    
    goToEdit() {
      uni.navigateTo({
        url: `/pages/user/edit/index?id=${this.userId}`
      });
    },
    
    goToTaskDetail(taskId) {
      uni.navigateTo({
        url: `/pages/task/detail/index?id=${taskId}`
      });
    }
  }
};
</script>

<style>
.user-detail {
  padding: 15px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.role-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #007AFF;
  color: #fff;
  font-size: 14px;
  margin-bottom: 15px;
}

.detail-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  padding-left: 8px;
  border-left: 3px solid #007AFF;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
}

.label {
  color: #666;
  width: 80px;
  flex-shrink: 0;
}

.value {
  flex: 1;
}

.warning {
  color: #ff3b30;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.action-btn {
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 4px;
  background-color: #007AFF;
  color: #fff;
}

.action-btn.disabled {
  background-color: #4cd964;
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 20px 0;
}
</style> 